
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
} from 'react-native';
import CommonView from './MiddleCommonView';
var TopMiddleData = require('../../LocalData/HomeTopMiddleLeft.json');
var Dimensions = require('Dimensions');
var {height,width} = Dimensions.get('window');
export default class HomeMiddleView extends Component {
  render() {
    return (
      <View style={styles.container}>
        {this._renderLeftView()}
        <View>
          {this._renderRightView()}
        </View>
      </View>
    );
  }
  _renderLeftView(){
    var data = TopMiddleData.dataLeft[0];
    return (
      <TouchableOpacity activeOpacity={0.5}>
        <View style={styles.leftViewStyle}>
          <Image source={{uri:data.img1}} style={styles.leftImgStyle}/>
          <Image source={{uri:data.img2}} style={styles.leftImgStyle}/>
          <Text>{data.title}</Text>
          <View style={{flexDirection:'row',marginTop:5}}>
            <Text style={{color:'blue',marginRight:5}}>{data.price}</Text>
            <Text style={{color:'orange',backgroundColor:'yellow'}}>{data.sale}</Text>
          </View>
        </View>
      </TouchableOpacity>
    );
  }
  _renderRightView(){
    var itemArr = [];
    var rightData = TopMiddleData.dataRight;
    //alert(JSON.stringify(rightData));
    for(var i=0; i<rightData.length; i++){
      var data = rightData[i];
      itemArr.push(
        <CommonView 
        key={i} 
        title={data.title} 
        subTitle={data.subTitle} 
        rightImage={data.rightImage} 
        titleColor={data.titleColor}
        />);
    }
    return itemArr;
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection:'row',
    marginTop:15,
  },
  leftImgStyle:{
    width:120,
    height:30,
    resizeMode:'contain',
  },
  leftViewStyle:{
    width:width * 0.5,
    height:119,
    backgroundColor:'white',
    marginRight:1,
    // 水平居中
    alignItems:'center',
    justifyContent:'center'
  },
});
